import React, { useEffect, useRef, useState } from "react";
import styles from "./index.module.less";
import { useHistory, useParams } from "react-router-dom";
import { Button, Form, Input, Modal, Select } from "antd";
import { VedioItem } from "./dto";

interface Options {
  label: string;
  value: string;
}

const Detail = () => {
  const { id } = useParams<{ id: string }>();
  const [open, setOpen] = useState(false);
  const [vedio, setVedio] = useState<VedioItem>({});
  const [tagOptions, setTagOptions] = useState<Options[]>([]);
  const [form] = Form.useForm();

  const history = useHistory();

  const videoRef = useRef<HTMLVideoElement>();

  const handleSubmit = (e: any) => {
    console.log(e);

    fetch("/api/update/" + id, {
      method: "POST",
      body: JSON.stringify(e),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        history.goBack();
      });
  };

  const handleFill = () => {
    form.setFieldsValue({
      size: videoRef.current?.videoHeight,
      time: Math.floor(videoRef.current?.duration),
    });
  };

  useEffect(() => {
    fetch("/api/vedio/" + id)
      .then((res) => res.json())
      .then((res: VedioItem) => {
        setVedio(res ?? {});
        form.setFieldsValue(res);
      });
  }, [id]);

  useEffect(() => {
    fetch("/api/tags")
      .then((res) => res.json())
      .then((res: string[]) =>
        setTagOptions(
          res?.map((m) => ({
            label: m,
            value: m,
          })) ?? []
        )
      );
  }, []);

  useEffect(() => {
    setTimeout(() => {
      // setOpen(true);
    }, 10);
  }, []);

  return (
    <div className={styles["detail-container"]}>
      <div className={styles.nav}>
        家庭影院
        <div>
          <div>{vedio.name}</div>
          <button onClick={() => setOpen(true)}>编辑</button>
        </div>
      </div>
      <video
        src={`/mp4/${id}.mp4`}
        controls
        onLoadedMetadata={(e) => {
          const v = e.target as HTMLVideoElement;
          videoRef.current = v;
        }}
      />
      <Modal
        open={open}
        footer={
          <div className={styles.footer}>
            <Button onClick={handleFill}>填充</Button>
            <Button onClick={() => setOpen(false)}>取消</Button>
            <Button type="primary" onClick={() => form.submit()}>
              确定
            </Button>
          </div>
        }
      >
        <Form form={form} onFinish={handleSubmit}>
          <Form.Item name="name" label="名称">
            <Input placeholder="请输入视频名字" />
          </Form.Item>
          <Form.Item name="size" label="尺寸">
            <Input placeholder="请输入尺寸" />
          </Form.Item>
          <Form.Item name="capacity" label="大小">
            <Input placeholder="请输入体积" />
          </Form.Item>
          <Form.Item name="time" label="时长">
            <Input placeholder="请输入时长" />
          </Form.Item>
          <Form.Item name="tags" label="tags">
            <Select mode="tags" options={tagOptions} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Detail;
